<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="js/urlUtils.js"></script>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/logo2.jpg" alt="">
    <span class="title"><a href="myblog_list.html">我的博客系统</a></span>
    <!-- 用来占据中间位置 -->
    <span class="spacer"></span>
    <a href="blog_list.html">主页</a>
    <a href="blog_add.html">写博客</a>
    <a href="login.html">登录</a>
</div>
<!-- 版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="container-left">
        <div class="card">
            <img id="photo" src="img/avatar.png" class="avtar" alt="">
            <h3 id="username"></h3>
            <a href="https://gitee.com/zzurlj">gitee 地址</a>
            <div class="counter">
                <span>文章</span>
            </div>
            <div class="counter">
                <span id="artcount"></span>
            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div class="container-right">
        <div class="blog-content">
            <!-- 博客标题 -->
            <h3 id="title"></h3>
            <!-- 博客时间 -->
            <div class="date">
                发布时间:<span id="createtime"></span>
                &nbsp;&nbsp;
                阅读量:<span id="rcount"></span>
            </div>
            <!-- 博客正文 -->
            <div id="editorDiv">

            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var editormd;

    function initEdit(md) {
        editormd = editormd.markdownToHTML("editorDiv", {
            markdown: md, // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    }

    // 先从url中获取文章id
    var id = getValueOfUrl('id');

    // 初始化页面
    function init() {
        // 1.校验参数
        if (id == null || id <= 0) {
            alert("参数有误!页面初始化失败!");
            return;
        }
        // 2.请求后端获取数据
        jQuery.ajax({
            type: 'get',
            url: 'art/detail',
            data: {
                'id': id,
            },
            success: function (res) {
                // 3.将数据展示到前端
                if (res.code == 200 && res.data != null) {
                    var user = res.data.user;
                    var art = res.data.art;
                    if (user != null) {
                        // 对用户板块初始化
                        if (user.photo != null) {
                            jQuery("#photo").attr(user.photo);
                        }
                        jQuery("#username").html(user.username);
                        jQuery("#artcount").html(user.artCount);
                    } else {
                        alert("抱歉,用户信息初始化失败!" + res.msg);
                    }
                    if (art != null) {
                        // 对文章板块初始化
                        jQuery("#title").html(art.title);
                        jQuery("#createtime").html(art.createtime);
                        jQuery("#rcount").html(art.rcount);
                        initEdit(art.content);
                    } else {
                        alert("抱歉,文章信息初始化失败!" + res.msg);
                    }
                } else {
                    alert("抱歉,页面初始化失败!" + res.msg);
                }
            }
        });
    }

    init();

    // 实现访问阅读量增加
    function rcount_increment() {
        if (id == null || id <= 0) {
            return;
        }
        jQuery.ajax({
            type: 'post',
            url: 'art/rcount_increment',
            data: {
                'id': id
            },
            success: function (res) {
                //不执行任何处理
            }
        });
    }

    rcount_increment();
</script>
</body>

</html>